<section>
    <h1 class="blue" data-id="#custom/content-slider"> Content Slider</h1>

    <div class="help-content">
        <!-- #section:custom/content-slider -->
        <div class="info-section">
            <ul class="info-list list-unstyled">
                <li>
                    Content sliders are based on Bootstrap modal boxes
                </li>

                <li>
                    You just need to add <code>.aside</code> class and one of the following values to <code>data-placement</code>
                    attribute of modal element:
                    <br/>
                    <code>top</code>
                    <code>bottom</code>
                    <code>right</code>
                    <code>left</code>
                    <br/>
				
<pre data-language="html">
 <div class="modal aside" data-placement="top">
     ...
 </div>
</pre>
                    and call the following function:
<pre data-language="javascript">
 $('.aside').ace_aside();
</pre>
                </li>

                <li>
                    The following options are also available both as function parameters or data attributes:
                    <ul>
                        <li><code>placement</code></li>
                        <li><code>backdrop</code> if "false" there will be no backdrop,
                            if "invisible" backdrop will become invisible, otherwise visible
                        </li>
                        <li><code>fixed</code> whether slider should be fixed or not</li>
                        <li><code>background</code> whether background should be dark or white</li>
                        <li><code>offset</code> whether slider should be below navbar or cover it</li>
                        <li><code>body_scroll</code> determines if body scroll is allowed when slider is visible</li>
                        <li><code>transition</code> disables or enables CSS3 transition of sliders</li>
                        <li><code>scroll_style</code> specifies scrollbar style if it's expected</li>
                    </ul>
<pre data-language="html">
 <div class="modal aside" data-placement="top" data-offset="true" data-background="true" data-body-scroll="false">
     ...
 </div>
</pre>
                    or
<pre data-language="javascript">
 $('.aside').ace_aside({
    placement: 'top',
    offset: true,
    background: true,
    body_scroll: false
 });
</pre>
                </li>

                <li>
                    Like modals, you can use any button to toggle sliders but
                    there is also an integrated(attached) button option you can use
                    by inserting after <code>.modal-content</code>:
<pre data-language="html">
<div class="modal-content">
    ...
</div>
<button type="button" data-toggle="modal" data-target="#target-modal"
        class="aside-trigger btn btn-info btn-app btn-xs ace-settings-btn">
    <i class="ace-icon fa bigger-110 icon-only fa-plus" data-icon2="fa-minus" data-icon1="fa-plus"></i>
</button>
</pre>
                </li>

            </ul>
        </div>
        <!-- /section:custom/content-slider -->
    </div>


</section>